<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import { useMenuStore } from '@/stores/menu'

const route = useRoute()

const menuStore = useMenuStore()

// 页面切换成功后，关闭changing
watch(
  () => route.path,
  () => {
    menuStore.setChanging(false)
  },
  {
    immediate: true
  }
)
</script>

<template>
  <Suspense>
    <div v-loading.fullscreen.lock="menuStore.switching || menuStore.changing" class="switch-application-wrapper" element-loading-text="切换中">
      <slot></slot>
    </div>
    <template #fallback>
      <div v-loading.fullscreen.lock="true" class="switch-application-wrapper" element-loading-text="切换中"></div>
    </template>
  </Suspense>
</template>

<style lang="scss" scoped>
.switch-application-wrapper {
  width: 100%;
  height: 100%;
}
</style>
